<!-- 首页楼层组件 -->
<template>
  <!-- 第三栏 -->
  <div class="showThree flex flex-col h-1.5">
    <div class="title-box flex justify-between">
      <span class="title-text">{{ props.title }}</span>
      <span v-if="props.tabs.length === 0">
        <RouterLink :to="{ name: 'goods' }" class="more-text">
          查看更多 &nbsp;
          <span class="rightIcon iconfont icon-arrow-right-bold"> </span>
        </RouterLink>
      </span>
      <div class="tab-box" v-else>
        <span
          v-for="(item, idx) in props.tabs"
          :key="idx"
          class="tab-item"
          :class="{ 'tab-item-active': String(idx) === currentTab }"
          @mouseenter="switchTab"
          :data-idx="idx"
          >{{ item }}</span
        >
      </div>
    </div>
    <div class="content flex justify-between" v-if="props.datas.length === 8">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d91bb6cf7da0947e8a6e50e03f4daf06.jpg?thumb=1&w=293&h=768&f=webp&q=90"
        alt=""
        class="left"
      />
      <div class="right">
        <div
          class="item flex flex-col"
          v-for="item in props.datas"
          @click="toDetail(item.id)"
        >
          <img :src="item.url" alt="" />
          <span class="title">{{ item.name }}</span>
          <span class="desc">{{ item.desc }}</span>
          <span class="price">{{ item.price }}元起</span>
        </div>
      </div>
    </div>
    <div class="content flex justify-between" v-else>
      <div class="right" style="padding-left: 0">
        <div
          class="item full-item flex flex-col"
          v-for="item in props.datas"
          @click="toDetail(item.id)"
        >
          <img :src="item.url" alt="" />
          <span class="title">{{ item.name }}</span>
          <span class="desc">{{ item.desc }}</span>
          <span class="price">{{ item.price }}元起</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 第三栏end -->
</template>

<script lang="ts">
export default {
  name: "",
};
</script>

<script lang="ts" setup>
import { defineProps, ref } from "vue";
import { useRouter } from "vue-router";
// import { getFloorGoods } from "../api/Home";
const router = useRouter();
const toDetail = (id: string) => {
  router.push({
    name: "detail",
    query: {
      id,
    },
  });
};
const props = defineProps({
  datas: {
    type: Array,
    default: [],
  },
  title: String,
  tabs: {
    type: Array,
    default: [],
  },
});

const currentTab = ref("1");
const switchTab = (e: any) => {
  const idx = e.target.dataset.idx;
  currentTab.value = idx;
};
</script>

<style scoped>
.tab-box {
}
.tab-item {
  margin-left: 30px;
  padding-bottom: 2px;
}
.tab-item-active {
  color: #ff6700 !important;
  border-bottom: 2px solid #ff6700;
}
.title-text {
  font-size: 22px !important;
  font-weight: 200;
  color: #333;
}
.more-text {
  font-size: 15px !important;
  margin-right: 10px;
}
.more-text:hover {
  color: #ff6700 !important;
}
.more-text:hover span {
  background-color: #ff6700 !important;
}
.rightIcon {
  background-color: #b0b0b0;
  color: white !important;
  font-size: 12px !important;
  display: inline-block;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
/* 满格平分样式 */
.full-item {
  margin-top: 10px;
}
/* 第三栏 */
.showThree {
  margin-top: 20px;
  height: 686px;
}
.showThree .title-box {
  height: 58px;
  line-height: 58px;
}
.showThree .title-box span {
  color: #333333;
  font-size: 16px;
}
.showThree .content .left {
  height: 614px;
}
.showThree .content .left:hover {
  box-shadow: -8px -2px 18px 1px rgb(0 0 0 / 50%);
}
.showThree .content .right {
  height: 100%;
  /* align-items: center; */
  padding: 0 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}
.showThree .content .item {
  box-sizing: border-box;
  padding: 10px 5px 15px 5px;
  /* margin: 0 5px; */
  width: 15.4vw;
  height: 290px;
  text-align: center;
  align-items: center;
  background-color: white;
}
.showThree .content .item:hover {
  box-shadow: -8px -2px 18px 1px rgb(0 0 0 / 50%);
}
.showThree .content .item img {
  height: 160px;
  width: 160px;
}
.showThree .content .item .title {
  font-size: 14px;
  color: #333;
}
.showThree .content .item .desc {
  font-size: 12px;
  color: #b0b0b0;
  margin-top: 5px;
  line-height: 18px;
}
.showThree .content .item .price {
  font-size: 14px;
  color: #ff6700;
  margin: 10px 0;
}
</style>
